<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用axis</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>

<body>

    <div id="app">
        <p v-for="word in words">{{word}}</p>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                bottom: false,
                words: []
            },
            watch: {
                bottom(bottom) {
                    if (bottom) {
                        this.addWord();
                    }
                }
            },
            methods: {
                bottomVisible() {
                    const visibleHeight = document.documentElement.clientHeight; //可见区域高度
                    const pageHeight = document.documentElement.scrollHeight; //body元素的滚动高度
                    const scrolled = window.scrollY;
                    const reachedBottom = visibleHeight + scrolled >= pageHeight;
                    return reachedBottom || pageHeight < visibleHeight;
                },

                addWord() {
                    axios.get('http://www.setgetgo.com/randomword/get.php')
                        .then(response => {
                            this.words.push(response.data);
                            if (this.bottomVisible()) {
                                this.addWord();
                            }
                        })
                }
            },
            created() {
                window.addEventListener('scroll', () => {
                    this.bottom = this.bottomVisible;
                })
                this.addWord();
            }
        })
    </script>
</body>

</html>